import Button from '../Button'
import styles from './style.module.css'

export default function Banner() {
  const title = 'Discover the world’s top designers & creatives'
  const desc = 'Dribbble is the leading destination to find & showcase creative work and home to the world\'s best designprofessionals.'
  return (
    <div className={`box-border py-16 px-8 md:py-0 md:px-0 ${styles.banner}`}>
      <div
        className={`box-border w-full md:flex md:flex-row-reverse md:justify-between md:items-center md:px-12 3xl:px-28 ${styles['banner-content']}`}
      >
        <img src="/imgs/banner.webp" className='w-full' alt=""/>
        <div className="mt-6 flex flex-col items-center md:items-start md:text-left">
          <h1
            className="text-5xl font-bold text-center mx-5 md:items-start md:text-left md:text-5xl md:leading-tight 3xl:text-7xl 3xl:leading-snug"
          >
            {title}
          </h1>
          <p className='text-center text-2xl my-6 mx-5 md:items-start md:text-left md:leading-10'>{desc}</p>
          <Button>Sign up</Button>
        </div>
      </div>
    </div>
  )
}